<template>
    <div>
        <h1 style="text-align: center;">分类列表</h1> 
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        <el-table
        :data="catList"
        style="width: 100%">
            <el-table-column
                prop="catname"
                label="分类名称"
                width="180">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑和新增对话框 -->
        <el-dialog
        title="分类标记"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <el-form label-width="80px">
            <el-form-item label="分类名称">
                <el-input v-model="catname"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {catList, catEdit, catDel, catAdd} from '@/request'
export default {
    data () {
        return {
            catList: [],
            dialogVisible: false,
            catname: '',
            id: ''
        }
    },
    methods: {
        // 获取分类列表
        getCatList() {
            catList().then(data => {
                // console.log(data);
                if(data.error_code === 200) {
                    this.catList = data.data.catlist
                }
                
            })
        },
        handleEdit(index, row) {
            this.dialogVisible = true
            this.catname = row.catname
            this.id = row._id
        },
        handleDelete(index, row) {
            this.$confirm('你确定要删除吗？', '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                catDel(row._id).then(data => {
                    let {msg, error_code} = data
                    if(error_code === 200) {
                        this.$message({
                            message: msg,
                            duration: 1500,
                            type: 'success',
                            onClose: () => {
                                this.dialogVisible = false
                                this.catList.splice(index, 1)
                            }
                        })
                    } else {
                        this.$message({
                            message: msg,
                            duration: 1500,
                            type: 'error'
                        })
                    } 
                })
            }).catch(() => {
                this.$message({
                    message: '已经取消删除！',
                    duration: 1500,
                    type: 'info'
                })
            })
        },
        onSubmit() {
            let promise = null
            if(this.id) {
                promise = catEdit({id: this.id, catname: this.catname})
            } else {
                promise = catAdd({catname: this.catname})
            }
            // console.log(this.catname);
            promise.then(data => {
                let {msg, error_code} = data
                if(error_code === 200) {
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'success',
                        onClose: () => {
                            this.dialogVisible = false
                            this.id = this.catname = ''
                            this.getCatList()
                        }
                    })
                } else {
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'error'
                    })
                }
            })
        }
    },
    created() {
        this.getCatList()
    }
}
</script>

<style>
    
</style>
